<template>
	<view class="newAddress">
		<uninavbar :title="title" leftIcon='leftIcon' rightIcon='' rightText="" />
		<view class="Addressform">
			<view class="formItem">
				<view class="formItemText">
					收货人
				</view>

				<input type="text" placeholder="名字" v-model="formData.name" />
			</view>
			<view class="formItem">
				<view class="formItemText">手机号码</view>
				<input type="number" placeholder="手机号" v-model="formData.phoneNumber" maxlength="11" />
			</view>
			<view class="formItem" @tap="areaChoose()">
				<view class="formItemText">所在地区</view>
				<view class="formItemR">
					<input type="text" placeholder="省，市，区，" v-model="area" :disabled="true" />
					<image class="areaImg" src="/static/images/user/wz.png" mode=""></image>
				</view>

			</view>
			<view class="formItem">
				<view class="formItemText">详细地址</view>
				<textarea v-model="formData.detailAddress" placeholder="街道/小区楼栋/乡村名称" auto-height="false"
					:maxlength="300" :auto-focus="false" />
			</view>
			<view class="formItem">
				<view class=""> 设为默认收货地址</view>
				<view class="formdefault" @tap="formData.defaultStatus=!formData.defaultStatus">
					<image v-if="formData.defaultStatus" src="/static/images/user/s.png" mode=""></image>
					<view v-else class=""></view>
				</view>
			</view>
		</view>
		<view class="addressfoot">

			<view class="addressBtn" @tap="submit()">
				完成
			</view>

		</view>
		<areaChoose ref='areaChoose' @confirm='areaConfirm'></areaChoose>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import areaChoose from '@/components/area-choose/area-choose.vue';
	import API from '@/config/newApi.js'
	import validator from '@/common/validator'
	export default {
		components: {
			uninavbar,
			areaChoose
		},
		data() {
			return {
				title: '',
				message: '',
				defaultShow: false,
				area: '',
				addressId: null,
				formData: {
					city: "",
					defaultStatus: 0,
					detailAddress: "",
					name: "",
					phoneNumber: "",
					postCode: "",
					province: "",
					region: "",
				}
			}
		},
		onLoad(data) {
			if (data.id) {
				this.addressId = data.id
				this.title = '编辑收货地址'
				this.addressDetails()
			} else {
				this.title = '添加收货地址'
			}
			console.log(data)
		},
		methods: {
			addressDetails() {
				API.addressDetails(this.addressId).then(res => {
						if (res.code == 200) {
							this.formData = res.data
							// this.formData.default=res.data.defaultStatus
							this.area = this.formData.province + this.formData.city + this.formData.region
						}

					})
					.catch(err => {

					})
			},
			submit() {
				if (this.addressId != null) {
					this.addressUpdate()
				} else {
					this.addressAdd()
				}
			},
			addressAdd(item) {
				if (!validator.checkMobile(this.formData.phoneNumber)) {
					return;
				}
				let args = {
					ContentType: 'application/json'
				}
				this.formData.defaultStatus = this.formData.defaultStatus ? 1 : 0
				API.addressAdd(this.formData, args).then(res => {
						if (res.code == 200) {
							this.$alert(res.message);
							uni.navigateBack({
								delta: 1
							});
						}
					})
					.catch(err => {

					})
			},
			addressUpdate(item) {
				let args = {
					ContentType: 'application/json'
				}
				this.formData.defaultStatus = this.formData.defaultStatus ? 1 : 0
				API.addressUpdate(this.formData, args).then(res => {
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							});
							this.$alert(res.message);
						}
					})
					.catch(err => {
						this.$alert(res.msg);
					})
			},
			areaChoose() {
				this.$refs.areaChoose.show()
			},
			//地址信息返回回调
			areaConfirm(e) {
				console.log(e);
				this.formData.province = e.addressList[0]
				this.formData.city = e.addressList[1]
				this.formData.region = e.addressList[2]
				this.formData.postCode = e.proCode
				this.area = e.address
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}

	.newAddress {
		padding-top: 110rpx;
	}

	textarea {}

	.Addressform {
		padding: 40rpx;
		background-color: #fff;
		border-top: 20rpx solid #F9F9F9;

		.formItem {
			display: flex;
			margin-bottom: 40rpx;
			position: relative;

			.formdefault {
				position: absolute;
				right: 0;
				top: 8rpx;

				view {
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #979797;
					border-radius: 50%;
				}

				image {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.formItemR {
				background: #F9F9F9;
				display: flex;
				width: 100%;
				align-items: center;
				margin-left: 30rpx;
			}

			.formItemText {
				width: 150rpx;
				line-height: 70rpx;
			}

			.areaImg {
				width: 30rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}

			textarea,
			input {
				background: #F9F9F9;
				height: 70rpx;
				flex: 1;
				line-height: 70rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				border-radius: 16rpx;


			}

			textarea {
				height: 200rpx !important;
			}
		}
	}

	.addressfoot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		box-sizing: border-box;
		padding: 40rpx 0;
	}

	.addressBtn {
		width: 520rpx;
		height: 80rpx;
		margin: auto;
		background: #6954D5;
		border-radius: 40rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;

	}
</style>